<template>
	<view class="">
		<view class="centent">
			<!-- 导航 -->
			<view class="nav_wrap  pd ">
				<view class="new-head" :style="{'margin-top':StatusBarHeight+10+'px'}">
					<image src="@/static/order/return.png" mode="aspectFill" @click="back"
						style="width: 64rpx;height: 64rpx;">
					</image>
					<view class="nav-title">
						详情
					</view>
					<view class="nav_share" @click="report('bottom')">
						<image src="../../static/square/menu.png" mode="widthFix" class="HR_menu"></image>
					</view>
				</view>
			</view>

			<!-- 内容区 -->
			<view class="post-list  pd " :style="{'margin-top':StatusBarHeight+90+'px'}">
				<view class="post-item">
					<view class="head_wrap">
						<!-- 人物头像 -->
						<view class="HF_wrap">
							<view class="HF_profile">
								<image :src="formDate.userAvatar" class="head_img"></image>
							</view>

							<view class="HD_wrap">
								<view class="HD_name">
									{{formDate.userName}}
								</view>
								<view class="HD_Time">
									{{formDate.createTime}} 发布
								</view>
							</view>
						</view>

						<!-- 关注  -->
						<view class="HR_wrap">
							<!-- 		<view class="HR_tuijian">
							<image src="../../static/square/recommend.png" mode="heightFix"></image>
						</view> -->

							<view class="HR_btn">
								关注
							</view>

							<!-- 	<view class="HR_share" @click="report('bottom')">
							<image src="../../static/square/menu.png" mode="widthFix" class="HR_menu"></image>
						</view> -->
						</view>
					</view>

					<!-- 文本内容 -->
					<view class="post-header" :class="{ 'expanded': formDate.video }">
						<text class="PC-title" @click="onDetaile(formDate)">{{ formDate.text }}
						</text>
					</view>

					<!--  -->
					<view class="post-content">
						<!-- 上传的是视频时 -->
						<view class="video_wrap" v-if="formDate.video">
							<ls-dom-video ref="domVideo" class="video-item" object-fit="contain" :controls="true"
								:show-progress="false" :show-fullscreen-btn="false" :show-play-btn="false"
								:show-bottom-progress="false" :autoplay="false" :src="formDate.video"></ls-dom-video>
						</view>

						<view v-if="formDate.photoList && formDate.photoList.length > 0 && !formDate.video"
							class="images">
							<view v-for="(img, index) in formDate.photoList" :key="index" class="item_wrap">
								<image :src="img" class="postImage" @click="viewImgs(img,'image')" mode="widthFix">
								</image>
							</view>
						</view>
					</view>

					<view class="post-footer">
						<view class="RTime">
							{{result.publishTime}} 发布
						</view>

						<view class="RNum">
							<view class="likes" @click="onLike(formDate)">
								<image v-show="!formDate.isUse" src="../../static/square/love.png" mode="heightFix"
									class="bubble"></image>
								<image v-show="formDate.isUse==1" src="../../static/square/loveRed.png" mode="heightFix"
									class="bubble"></image>
								<text>{{ formDate.favoriteNum || 0 }}</text>
							</view>
							<view class="comments">
								<image src="../../static/square/bubble.png" mode="heightFix" class="bubble"></image>
								<text>{{ commentList.length || 0 }}</text>
							</view>
						</view>

					</view>
				</view>
			</view>

			<!-- 评论区 -->
			<view id="yourViewId" class="comment-wrap pd">
				<view class="CHeader">
					<view class="ch_title">
						全部评论
					</view>
					<mimicry-switch left="推荐" right="最新" :current.sync="switchs"></mimicry-switch>
				</view>

				<view class="comment-list" v-if="commentList&&commentList.length>0">
					<view class="comment-item" v-for="(item,index) in commentList" :key="index">
						<view class="CI-img">
							<image :src="item.userAvatar" mode="widthFix" class="head_img"></image>
						</view>

						<view class="CI-cent" @longpress="onLongpress(item)">
							<view class="item_title">
								<view class="item_name">
									{{item.userName}}
								</view>
								<view class="item_aixin" @click="onCommentLike(item)">
									<image v-show="!item.masterUse" src="../../static/square/love.png" mode="heightFix"
										class="bubble"></image>
									<image v-show="item.masterUse==1" src="../../static/square/loveRed.png"
										mode="heightFix" class="bubble"></image>
									<view class="item_aent">{{ item.favoriteNum }}</view>
								</view>
							</view>

							<view class="item_text">
								{{item.commentDescription}}
							</view>

							<view class="item_time">
								{{item.publishDate}} 发布
							</view>

							<view class="item_hx" />
						</view>
					</view>
				</view>
				<view class="nullData" v-else>
					<image src="../../static/postDetail/message.png" mode="widthFix"></image>
					<view class="txt">
						沙发等你来抢~
					</view>
				</view>
			</view>
		</view>
		<!-- 发表评论 -->
		<view class="publish_wrap-empy pd">
		</view>
		<view class="publish_wrap ">
			<view class="publish_sty">
				<input class="uni-input" v-model="commentDescription" confirm-type="send" type="idcard"
					@confirm="onsubmit" placeholder="友善评论，文明发言" :maxlength="300" style="width: 90%;" />

			</view>
		</view>

		<!-- 底部弹窗 -->
		<uni-popup ref="popup" borderRadius="20rpx 20rpx 0 0 " background-color="#fff">
			<view class="pop_height">
				<view class="report_red" @click="onDel" v-if="formDate.customerId ==Info.id && isPostOrComm">
					删除
				</view>
				<view class="report_red" @click="onDel" v-if="formDate.customerId ==Info.id">
					删除
				</view>
				<view class="report_red" @click="onReport" v-else>
					举报
				</view>
				<view class="cancel_des" @click="pop_cancel">
					取消
				</view>
			</view>
		</uni-popup>

		<imageViewer ref="imageViewerRef" :types="viewType" :urls="viewImg" :show.sync="viewShow"></imageViewer>
	</view>
</template>

<script>
	import imageViewer from '@/components/imagesViewer/imagesViewer.vue'
	import {
		getStatusBarHeight,
	} from "@/utils/system.js"
	import {
		threadsById,
		addComment,
		addLike,
	} from "@/api/apis.js"
	import {
		delPost,
	} from "@/api/post.js";
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		components: {
			imageViewer,
		},
		data() {
			return {
				StatusBarHeight: 0, //导航栏高度
				switchs: false,
				id: "", //详情ID
				RemarkID: "", //评论ID
				commentDescription: "", //用户评论
				postRemarkId: null, //	评论id或帖子id
				reportType: 0, //举报类型 0 帖子 1评论
				result: {},

				formDate: {
					// id: 1,
					// userId: 1001,
					// username: '不熬夜的可乐崽',
					// format: "mp4",
					// isExpanded: false,
					// heade: "https://img1.baidu.com/it/u=2389665777,530557083&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
					// avatar: 'https://img1.baidu.com/it/u=1212049217,1477013670&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667',
					// text: '🌙 夜晚的宁静，像是一首未完的诗，轻轻铺展在窗前。我静静地坐着，让思绪随着月光流淌，远离白日的喧嚣。生活，不就是在这份宁静中，找到内心的平和与力量吗？愿你我都能在纷扰中找到属于自己的宁静角落。✨',
					// photoList: [
					// 	'https://img30.360buyimg.com/imgzone/jfs/t1/33820/34/17124/63489/63380c19Ed856ce71/09b209477e18c9fd.jpg',
					// 	'http://t14.baidu.com/it/u=236781710,3753173245&fm=224&app=112&f=JPEG?w=500&h=500',
					// 	'https://img1.baidu.com/it/u=2009213826,117219826&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333'
					// ],
					// likes: 23,
					// comments: 5,
					// createTime: '2023-04-01 12:00:00'
				},

				commentList: [], //评论列表

				viewImg: '',
				viewShow: false,
				viewType: '',


			};
		},

		onLoad(val) {
			this.id = val.id; //点击帖子
			this.RemarkID = val.RemarkID //点击评论
			this.StatusBarHeight = getStatusBarHeight()
			this.onSearch() //获取详情
		},
		computed: {
			...mapState("userInfo", ["Info", 'storeId']),
		},


		methods: {
			viewImgs(url, type) {
				this.viewImg = url
				this.viewType = type
				this.viewShow = true
			},
			// 详情
			onSearch() {
				console.log(this.Info);
				let prams = {
					id: this.id || this.RemarkID
				}
				threadsById(prams).then(res => {
					let forumThreadsVO = res.result.forumThreadsVO
					console.log(res);
					this.result = res.result
					this.formDate = forumThreadsVO
					this.commentList = res.result.comments || [] //评论列表

				})


				// 是否调用滚动
				if (this.RemarkID) {
					this.$nextTick(() => {
						this.getViewPosition()
					})
				}
			},

			// 滚动
			getViewPosition() {
				const query = uni.createSelectorQuery();
				query.select('#yourViewId').boundingClientRect(rect => {
					rect.top // view组件距离顶部的位置  
					this.backToTop(rect.top);
				}).exec();
			},



			backToTop(top) {
				console.log(top);
				// uni.pageScrollTo({
				// 	scrollTop: top + 500, // 滚动到页面的目标位置（单位px）
				// 	duration: 200 // 滚动动画的时长，默认300ms，单位 ms
				// });

				setTimeout(() => {
					uni.pageScrollTo({
						scrollTop: top + 100, //滚动的距离
						duration: 200, //过渡时间
					})

				}, 100)
			},

			// 底部弹窗 举报类型 0 帖子

			report(type) {
				this.postRemarkId = this.formDate.id
				this.reportType = 0 //举报类型 0 帖子 1评论
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},

			// 举报类型 1 评论
			onLongpress(item) {
				console.log(item);
				this.postRemarkId = item.id // 评论id
				this.userCustomerId = item.customerId //当前评论人的用户ID
				this.reportType = 1 //举报类型 0 帖子 1评论
				this.report('bottom')
			},

			// 举报
			onReport() {
				this.pop_cancel()
				uni.navigateTo({
					url: `/pages/userReport/userReport?id=${this.postRemarkId}&Type=${this.reportType}`
				})
			},

			// 点赞 点赞业务类型 0 帖子 1 评论"
			onLike(item) {
				item.isUse = item.isUse == 1 ? 0 : 1
				if (item.isUse == 1) {
					item.favoriteNum++
					let params = {
						"bizId": item.id,
						"bizType": 0,
						"liked": true
					}
					this.updeta(params)
				} else {
					item.favoriteNum--
					let params = {
						"bizId": item.id,
						"bizType": 0,
						"liked": false
					}
					this.updeta(params)
				}
			},


			onCommentLike(item) {
				item.masterUse = item.masterUse == 1 ? 0 : 1
				if (item.masterUse == 1) {
					item.favoriteNum++
					let params = {
						"bizId": item.id,
						"bizType": 1,
						"liked": true
					}
					this.updeta(params)
				} else {
					item.favoriteNum--
					let params = {
						"bizId": item.id,
						"bizType": 1,
						"liked": false
					}
					this.updeta(params)
				}
			},
			// 点赞
			updeta(params) {
				addLike(params).then(res => {
					console.log(res);
				})
			},

			// 删除帖子
			onDel(item) {
				delPost({
					id: this.formDate.id
				}).then(res => {
					if (res.success) {
						uni.showToast({
							title: '删除成功',
							duration: 2000
						});
						this.$refs.popup.close()
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					}
				})
			},


			// 取消
			pop_cancel() {
				this.$refs.popup.close()
			},


			// 发表评论
			onsubmit(e) {
				let params = {
					commentDescription: e.target.value,
					postId: this.id || this.RemarkID,
					// id:this.Info.id
				}
				addComment(params).then(res => {
					console.log(res);
					if (res.success) {
						uni.showToast({
							title: '评论成功',
							duration: 2000
						});
						setTimeout(() => {
							this.onSearch() //获取详情
						}, 2000)
						this.commentDescription = ''
					}
				})

			},


			back() {
				uni.navigateBack(0)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pd {
		padding: 0 32rpx;
	}

	.centent {
		background-color: #F7F7F7;
		box-sizing: border-box;

		// 导航
		.nav_wrap {
			position: fixed;
			background-color: #FFF;
			top: 0;
			z-index: 1;
			width: 100%;

			.new-head {
				width: 100%;
				display: flex;
				padding: 30rpx 0 38rpx 0;
				box-sizing: border-box;
				justify-content: space-between;
				align-items: center;
				background-color: #FFF;

				.nav-title {
					width: 360rpx;
					height: 48rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #181127;
					line-height: 48rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}

				.nav_share {
					width: 44rpx;
					height: 44rpx;
					border-radius: 0px 0px 0px 0px;

					.HR_menu {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}

		// 详情
		.post-list {
			background-color: #FFF;
			padding: 0 24rpx;
			box-sizing: border-box;
			padding-bottom: calc(var(--window-bottom));
			// padding-bottom: calc(var(--window-bottom) + 160rpx);

			// .post-item {
			// 	margin-top: 0rpx;
			// }


			// .post-item:nth-child(n+1) {
			// 	margin-top: 60rpx;
			// }


			.head_wrap {
				margin-bottom: 16rpx;
				display: flex;
				justify-content: space-between;

				// 人物头像
				.HF_wrap {
					display: flex;
					color: rgba(51, 51, 51, 0.8);

					.HF_profile {

						// 头像
						.head_img {
							width: 80rpx;
							height: 80rpx;
							border-radius: 0px 0px 0px 0px;
							border-radius: 50%;
						}
					}

					.HD_wrap {
						margin-left: 20rpx;
						margin-top: 10rpx;

						.HD_name {
							font-size: 28rpx;
						}

						.HD_Time {
							font-size: 24rpx;
						}
					}
				}

				// 关注
				.HR_wrap {
					display: flex;
					align-items: center;

					.HR_tuijian {

						// display: flex;
						image {
							height: 44rpx;
						}
					}

					// 关注
					.HR_btn {
						width: 96rpx;
						height: 44rpx;
						background: #FFFFFF;
						border-radius: 22rpx;
						border: 2rpx solid $uni-text-color-red;
						font-weight: 400;
						font-size: 24rpx;
						color: $uni-text-color-red;
						display: flex;
						justify-content: center;
						align-items: center;

						margin: 0 14rpx 0 38rpx;
					}

					.HR_share {
						width: 44rpx;
						height: 44rpx;
						border-radius: 0px 0px 0px 0px;
						display: flex;
						justify-content: center;
						align-items: center;

						.HR_menu {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
			}
		}

		//内容
		.post-content {
			margin-top: 24rpx;
			background-color: #FFF;

			.images {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				/* 移除图片底部的小间隙 */
				.item_wrap {
					width: 100%;
					min-height: 400rpx;
					border-radius: 12rpx;
					margin-bottom: 20rpx;
					overflow: hidden;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
				}

				.postImage {
					position: absolute;
					width: 100%;
					border-radius: 12rpx;
					/*使用绝对定位来防止高度挤压别的盒子*/
				}

			}


			// 视频
			.video_wrap {
				margin-top: 24rpx;
				text-align: center;

				.video-item {
					z-index: 1;
				}
			}
		}

		// 底部
		.post-footer {
			background-color: #FFF;
			margin-top: 22rpx;
			display: flex;
			justify-content: space-between;

			.RTime {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #BABABA;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.RNum {
				display: flex;

				.comments,
				.likes {
					display: flex;
					justify-content: end;
					align-items: center;
					font-weight: 400;
					font-size: 22rpx;
					color: #BABABA;

					.bubble {
						width: 44rpx;
						height: 44rpx;
						margin-right: 10rpx;
					}
				}

				.comments {
					margin-left: 46rpx;
					margin-right: 32rpx;
				}
			}
		}

		// 评论列表
		.comment-wrap {
			margin-top: 20rpx;
			background-color: #FFF;

			.CHeader {
				height: 88rpx;
				display: flex;
				width: 100%;
				justify-content: space-between;
				align-items: center;

				.ch_title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}

			.comment-list {
				margin-top: 4rpx;

				.comment-item {
					display: flex;
					margin-bottom: 34rpx;

					.CI-img {
						width: 68rpx;
						height: 68rpx;

						.head_img {
							height: 100%;
							width: 100%;
							border-radius: 50%;
						}
					}

					.CI-cent {
						margin-left: 20rpx;

						.item_title {
							display: flex;
							justify-content: space-between;

							.item_name {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: rgba(51, 51, 51, 0.4);
								line-height: 40rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}

							.item_aixin {
								position: relative;
								font-size: 24rpx;
								color: #BABABA;
								line-height: 40rpx;

								.bubble {
									width: 36rpx;
									height: 36rpx;
								}

								.item_aent {
									position: absolute;
									bottom: -26rpx;
									right: 10rpx;
								}
							}
						}

						.item_text {
							width: 560rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
						}

						.item_time {
							margin-top: 10rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: rgba(51, 51, 51, 0.4);
							line-height: 36rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}

						.item_hx {
							margin-top: 24rpx;
							background: #D9D9D9;

							width: 598rpx;
							height: 1rpx;
							background: #D9D9D9;
						}
					}
				}
			}

			.nullData {
				width: 100%;
				margin: 100rpx 0 230rpx 0;

				image {
					width: 28%;
					margin: 0 auto;
					display: block;
				}

				.txt {
					text-align: center;
					color: #8C8EA0;
					font-size: 30rpx;
					margin-top: 30rpx;
				}
			}
		}
	}

	// 底部弹窗
	.pop_height {
		height: 12vh;
		text-align: center;
		display: flex;
		flex-direction: column;
		padding: 10rpx;

		.report_red {
			margin-top: 30rpx;
			color: $uni-text-color-red;
		}

		.cancel_des {
			margin-top: 30rpx;
			color: #888;
		}
	}


	.publish_wrap-empy {
		width: 100%;
		height: 98rpx;
	}

	// 评论
	.publish_wrap {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 98rpx;
		z-index: 1;
		background: #fff;
		// background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
		box-shadow: 0px -4rpx 8rpx 0px rgba(0, 0, 0, 0.06);
		border-radius: 0px 0px 0px 0px;
		display: flex;
		justify-content: center;
		align-items: center;

		.publish_sty {
			width: 686rpx;
			height: 72rpx;
			background: #F7F7F7;
			border-radius: 36rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;

			.uni-input {
				padding-left: 16px;
			}
		}
	}
</style>